<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="800px"
    @close="close"
  >
    <el-form ref="formRef" label-width="140px" :model="form" :rules="rules">
      <el-form-item label="请选择产品或赠品" prop="ProductType">
        <el-select
          v-model="form.ProductType"
          style="width: 100px"
          @change="form.OrderListID = null"
        >
          <el-option label="产品" :value="0" />
          <el-option label="赠品" :value="1" />
        </el-select>

        <el-select
          v-if="form.ProductType == 0"
          v-model="form.OrderListID"
          style="width: 250px; margin-left: 10px"
          @change="getOrderListID"
        >
          <el-option
            v-for="item in OrderList"
            :key="item.OrderListID"
            :label="item.ProductName"
            :value="item.OrderListID"
          />
        </el-select>

        <el-select
          v-if="form.ProductType == 1"
          v-model="form.OrderListID"
          style="width: 250px; margin-left: 10px"
          @change="getOrderListID"
        >
          <el-option
            v-for="item in GiftList"
            :key="item.OrderListID"
            :label="item.ProductName"
            :value="item.OrderListID"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="换店原因" prop="ChangeReasonID">
        <el-select v-model="form.ChangeReasonID">
          <el-option
            v-for="(item, index) in ReasonOption"
            :key="index"
            :label="item.LabelName"
            :value="item.LabelID"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="原因备注" prop="ChangeMemo">
        <el-input v-model="form.ChangeMemo" />
      </el-form-item>
      <el-form-item label="新公司名称" prop="ChangeJson.NewCompanyName">
        <el-input v-model="form.ChangeJson.NewCompanyName" />
      </el-form-item>
      <el-form-item label="新店网址" prop="ChangeJson.NewCompanyAddress">
        <el-input v-model="form.ChangeJson.NewCompanyAddress" />
      </el-form-item>
    </el-form>
    <template v-if="actstaffpostid == 10 || actstaffpostid == 42" #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { saveOrderChange } from '@/api/businessOrder'
  import { getReasonOption } from '@/api/common'

  export default defineComponent({
    name: 'Back',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        actstaffpostid: 0,
        OrderList: [],
        GiftList: [],
        ReasonOption: [],
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          ChangeMemo: [
            { required: true, trigger: 'blur', message: '请输入换店原因' },
          ],
          'ChangeJson.NewCompanyName': [
            { required: true, trigger: 'blur', message: '请输入新的公司名称' },
          ],
          'ChangeJson.NewCompanyAddress': [
            { required: true, trigger: 'blur', message: '请输入新的公司地址' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })

      const showEdit = (row, OrderList, GiftList) => {
        const userInfo = JSON.parse(localStorage.getItem('userInfo'))
        const actstaffpost = JSON.parse(userInfo.StaffPostID)
        state.actstaffpostid = actstaffpost[0][1]
        state.title = '换店服务'

        state.OrderList = OrderList
        state.GiftList = GiftList
        state.form = Object.assign({}, row)

        if (!row.OrderListID) {
          state.form.OrderListID = OrderList[0]?.OrderListID
        }
        if (!row.OrderChangeID) {
          state.form.OrderChangeID = 0
        }
        if (row.ChangeJson) {
          state.form.ChangeJson = JSON.parse(row.ChangeJson)
        } else {
          state.form.ChangeJson = {}
        }
        getReasonOptions()
        state.dialogFormVisible = true
      }
      const getReasonOptions = async () => {
        const getReasonParams = {
          ReasonClassID: 9,
        }
        const {
          data: { ReasonOption },
        } = await getReasonOption(getReasonParams)
        state.ReasonOption = ReasonOption
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = { ChangeJson: {} }
        state.dialogFormVisible = false
      }
      const save = () => {
        console.log(state.form, 'ces')
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const dataMsg = {
              ChangeReasonID: state.form.ChangeReasonID,
              OrderChangeID: state.form.OrderChangeID,
              OrderID: state.form.OrderID,
              OrderListID: state.form.OrderListID,
              ActType: 8,
              ChangeJson: state.form.ChangeJson,
              ChangeMemo: state.form.ChangeMemo,
            }
            const { msg } = await saveOrderChange(dataMsg)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        getReasonOptions,
        close,
        save,
      }
    },
  })
</script>
